<template>
    <div class="container">
      <div class="title">
        喵咪音乐
      </div>
      <div class="banner">
      </div>
      <div class="sub-title">
        <img src="../../assets/huatong.png" class="cup" alt=""> <span style="margin-left: 0.2rem">嘉宾寄语</span>
      </div>
      <div class="main">
        <div class="card-wrap">
          <div class="card" @click="playVideo('http://xinniuyunstore.test.upcdn.net/vote/1577185981992629.mp4')" style="background: url('http://xinniuyunstore.test.upcdn.net/vote/zhuchi2.png') no-repeat;background-size:cover">
            <div class="play" style="display: flex;align-items: center;justify-content: center; border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;">
              <img src="../../assets/play.png" width="40px" height="40px" style="margin-top: 0.2rem;opacity: 0.2" alt="">
            </div>
          </div>
          <div class="word-name">
            <span style="width: 100%;text-align: center">主持人：杨吕</span>
          </div>
        </div>
        <div class="card-wrap">
          <div class="card" @click="playVideo('http://xinniuyunstore.test.upcdn.net/vote/1577185984962401.mp4')" style="background: url('http://xinniuyunstore.test.upcdn.net/vote/zhuchi1.png') no-repeat;background-size:cover">
            <div class="play" style="display: flex;align-items: center;justify-content: center; border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;">
              <img src="../../assets/play.png" width="40px" height="40px" style="margin-top: 0.2rem;opacity: 0.3" alt="">
            </div>
          </div>
          <div class="word-name">
            <span style="width: 100%;text-align: center">主持人：璐璐姐姐</span>
          </div>
        </div>
        <div class="sub-title">
          <img src="../../assets/cup2x.png" class="cup" alt=""> <span style="margin-left: 0.2rem">参赛视频</span>
        </div>
      </div>
        <transition-group class="main" name="list-complete" tag="div">
          <div class="card-wrap" v-for="(item,index) in dataList" :key="item.id" :isLast="(index == dataList.length-1) && index%2==0?true:false">
          <div class="card" @click="playVideo(item.videoUrl)" :style="'background: url('+item.imgUrl+') no-repeat;background-size:cover'">
            <div class="play" style="display: flex;align-items: center;justify-content: center">
              <img src="../../assets/play.png" width="40px" height="40px" style="margin-top: 0.5rem;opacity: 0.3" alt="">
            </div>
            <div class="text-wrap">
              <div class="text">
                <span>人气：{{item.hot}}</span>
                <span>总票数：{{item.votes}}</span>
              </div>
            </div>
          </div>
          <div class="content-wrap">
            <div class="content">
              <div class="word-name">
                <img v-if="index ==0" src="../../assets/NO1@2x.png" style="width: 0.73rem;height: 0.73rem;margin-right: 0.1rem"  alt="">
                <img  v-else-if="index ==1" src="../../assets/NO2@2x.png" style="width: 0.73rem;height: 0.73rem;margin-right: 0.1rem"  alt="">
                <img v-else-if="index ==2" src="../../assets/NO3@2x.png" style="width: 0.73rem;height: 0.73rem;margin-right: 0.1rem"  alt="">
                <span class="no" v-else>{{index+1}}</span>
                <span style="width: 3.5rem;text-align: start" :style="item.title.length>8?'font-size:0.22rem':''">{{item.title}}</span>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between;align-items: center;width:100%">
              <div class="name">
                {{item.player}}
              </div>
              <div  class="button"  @click="giveVote(item.id)">
                {{'投票'}}
              </div>
            </div>
          </div>
        </div>
        </transition-group>

      <van-overlay :show="show" @click="show = false">
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%">
          <video ref="videos" playsinline :src="videoUrl" width="80%" webkit-playsinline height="auto"   autoplay controls></video>
        </div>
      </van-overlay>
      <!--<van-popup   :style="{ width: '100%',height: 'auto' }" v-model="show">-->

      <!--</van-popup>-->
      <van-overlay :show="shareShow" @click="shareShow = false">
        <img src="../../assets/righttop.png" class="share-action" style="width: 0.5rem;height: 0.5rem;position: absolute;right: 0.3rem;top: 0.3rem" alt="">
        <div style="color: white;font-size: 0.63rem;position: absolute;width:100%;text-align:center;top: 1.5rem">
          您今日投票机会已经没有啦
          <br>
          右上角分享到朋友圈
          <br>或发送给朋友
          <br>为您喜欢的选手投票吧
        </div>
      </van-overlay>
<!--      <div style="position: fixed;bottom: 0.5rem;right: 0.5rem;height: 1.22rem">-->
<!--        <img v-if="shareShow" @click="share" src="../../assets/share.png" style="width:1rem;height: 1rem" alt="">-->
<!--      </div>-->
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import {Toast, Dialog} from 'vant'
import {getInfos, getSign, login, vote} from '../../utils/api'
export default {
  name: 'index',
  data () {
    return {
      videoUrl: '',
      show: false,
      unionid: '',
      code: this.$route.query.code,
      shareShow: false,
      dataList: [

      ]
    }
  },
  created () {
    this.getInfo()
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    this.login()
    getSign({ url: location.href.split('#')[0] }).then((res) => {
      wx.config({
        debug: false, // 开启调试模式,
        appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
        timestamp: res.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名，见附录1
        jsApiList: ['updateTimelineShareData','updateAppMessageShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
      wx.ready(function () { // 需在用户可能点击分享按钮前就先调用
        wx.updateTimelineShareData({
          title: '喵咪星梦少儿才艺大赛', // 分享标题
          link: 'http://api.autowired.cn/r', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://q1ouj37t5.bkt.clouddn.com/icon.jpg',
          success: function () {
            // 设置成功
          }
        })
      })
      wx.ready(function () {  //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: '喵咪星梦少儿才艺大赛', // 分享标题
          desc: '投上您宝贵的一票', // 分享描述
          link: 'http://api.autowired.cn/r', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://q1ouj37t5.bkt.clouddn.com/icon.jpg', // 分享图标
          success: function () {
            // 设置成功
          }
        })
      })
      // wx.onMenuShareTimeline({
      //   title: '喵咪星梦少儿才艺大赛', // 分享标题
      //   link: 'http://api.autowired.cn/r', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl: 'http://q1ouj37t5.bkt.clouddn.com/icon.jpg', // 分享图标
      //   success: function () {
      //     // 用户点击了分享后执行的回调函数
      //     console.log('分享')
      //   }
      // })
      // wx.onMenuShareAppMessage({
      //   title: '喵咪星梦少儿才艺大赛', // 分享标题
      //   desc: '投上您宝贵的一票', // 分享描述
      //   link: 'http://api.autowired.cn/r', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl: 'http://q1ouj37t5.bkt.clouddn.com/icon.jpg', // 分享图标
      //   type: '', // 分享类型,music、video或link，不填默认为link
      //   dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
      //   success: function () {
      //     // 用户点击了分享后执行的回调函数
      //   }
      // })
    })
    console.log(wx)
  },
  methods: {
    // handleScroll () {
    //   var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    //   console.log(scrollTop)
    //   if (scrollTop <= 100) {
    //     console.log('ok')
    //     this.shareShow = false
    //   } else {
    //     this.shareShow = true
    //   }
    // },
    login () {
      login(this.code).then(res => {
        console.log(res.code)
        console.log('login()执行一次')
        if (res.code === 1) {
          this.unionid = res.data
          localStorage.setItem('unionid', res.data)
        }
        if (res.code === -3) {
          if (res.data.indexOf('http') > -1) {
            // window.location.href = res.data
          } else {
            Toast('当前页面失效,请重新进入')
          }
        }
      })
    },
    getInfo () {
      getInfos().then(res => {
        this.dataList = res.data
      })
    },
    giveVote (id) {
      Toast('投票已经截止啦！')
      // if (this.unionid == null) {
      //   this.unionid = localStorage.getItem('unionid')
      // }
      // vote(this.unionid, id).then(res => {
      //   if (res.code === 1) {
      //     Toast('投票成功!')
      //     this.getInfo()
      //   }
      //   if (res.code === -1) {
      //     Dialog.alert({
      //       title: '请先关注"喵咪音乐"公众号',
      //       message: '请在接下来的页面点击 喵咪音乐 的图标,选择关注,或者 微信公众号搜索 "喵咪音乐" 关注后即可继续投票'
      //     }).then(() => {
      //       // on close
      //       window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MjM5NzQ4NzQ1Nw==&scene=124#wechat_redirect'
      //     })
      //   }
      //   if (res.code === -2) {
      //     Toast('您已经投过了')
      //     this.shareShow = true
      //   }
      //   if (res.code === -3) {
      //     Toast('请退出后重新进入')
      //   }
      // }).catch(() => {
      //   Toast('请退出后重新进入')
      // })
    },
    playVideo (videoUrl) {
      this.videoUrl = videoUrl
      this.show = true
      this.$refs.videos;
      console.log(videoUrl)
    },
    share () {

    }
  }
}
</script>

<style scoped>
  .no{
    font-size:0.63rem;
    font-weight:bold;
    color:rgba(255,206,8,1);
    margin-right: 0.3rem
  }
  .content-wrap {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
  }
  .content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .play{
    position: relative;
    top: 0;
    z-index: 1;
    background:rgba(0,0,0,0.2);
    width:4.5rem;
    height: 2.7rem;
    border-top-left-radius:0.2rem;
    border-top-right-radius:0.2rem;
  }
  .main {
    width:95%;
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
  }
  .button:active{
    background: rgb(208, 166, 8);
  }
  .button {
    width:1.42rem;
    height:0.61rem;
    font-size: 0.39rem;
    background:rgba(255,206,8,0.3);
    box-shadow:0rem 0.1rem 0.16rem 0rem rgba(147,123,12,0.24);
    border-radius:0.305rem;
    text-align: center;
    line-height: 0.65rem;
    color: rgba(255,255,255,1);
    font-weight: bold;
  }
  .button-wrap{
    display: flex;
    height: 1.2rem;
    flex-direction: column;
    justify-content: center;
  }
  .name{
    font-size:0.33rem;
    font-weight:400;
    color:rgba(153,153,153,1);
    /*margin-bottom: 0.28rem;*/
  }
  .card-wrap{
    /*width: 100%;*/
    transition: all 1s;
    margin-bottom: 0.2rem;
  }
  .card{
    /*background-color: white;*/
    background-size: cover;
    width:4.5rem;
    height:2.7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius:0.2rem;
    box-shadow:-5px 5px 16px -4px rgba(0,0,0,0.1),5px 5px 16px -4px rgba(0,0,0,0.1);
  }
  .text-wrap{
    width:4.5rem;
    height:0.56rem;
    background:rgba(0,0,0,0.3);
    border-radius: 0rem 0rem 0.2rem 0.2rem;
  }
  .word-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.28rem;
    /*margin-left: 0.28rem;*/
    font-size:0.39rem;
    font-weight:bold;
    color:rgba(0,0,0,1);

  }
  .text{
    width:4rem;
    height:0.56rem;
    margin: 0 auto;
    line-height: 0.56rem;
    font-weight:200;
    color:rgba(255,255,255,1);
    font-size: 0.28rem;
    display: flex;
    justify-content: space-between;
  }
  .title{
    margin-top: 0.44rem;
    width:3.08rem;
    height:0.51rem;
    font-size:0.53rem;
    justify-self: flex-start;
    align-self: flex-start;
    font-weight:bold;
    color:rgba(0,0,0,1);
  }
  .sub-title {
    width: 95%;
    margin-top: 0.63rem;

    margin-bottom: 0.25rem;
    display: flex;
    justify-content: flex-start;
    font-size:0.44rem;
    font-weight:400;
    color:rgba(0,0,0,1);
  }
  .container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cup {
    width: 0.58rem;
    height: 0.58rem;
  }
  .banner{
    box-shadow:-5px 5px 16px -4px rgba(0,0,0,0.1),5px 5px 16px -4px rgba(0,0,0,0.1);
    margin-top: 0.5rem;
    width:9.5rem;
    height:4.68rem;
    border-radius:0.5rem;
    background: url("http://xinniuyunstore.test.upcdn.net/vote/bg-new.jpeg")  no-repeat;
    /*background-size: cover;*/
    background-size: contain;
  }
  video {
    vertical-align: middle;
    object-fit:fill;
  }
  .share-action{
    animation: action infinite 1s;
  }
  @keyframes action {
    from {
      right: 1rem;
      top: 1rem;
    }
    to{
      right: 0.6rem;
      top: 0.4rem;
    }
  }
  .list-complete-item {
    transition: all 1s;
    display: inline-block;
    /*margin-right: 10px;*/
  }
  .list-complete-enter, .list-complete-leave-to
    /* .list-complete-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
  }
  .list-complete-leave-active {
    position: absolute;
  }
</style>
